<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝选女友</title>
		<style>
			* { margin:0; padding:0}
ul,ol { list-style:none}
h3 { height:40px }
button:disabled { cursor: not-allowed; }
.shopping { width:570px; margin:100px auto; padding:20px; border:1px solid #ccc; position:relative; overflow: hidden; }
.shopping .left { float: left; }
.shopping .right { float: right; }
.shopping .girlImg { position: relative; width:200px; height: 200px}
.shopping .girlImg img { width:100%; height: 100%}
.shopping .girlImg span { display: none; width: 100px; height: 100px; position: absolute; background: rgba(255, 255, 0, 0.3)}
.imgList { width:220px; margin-top: 20px; }
.imgList li { float:left; margin-right:8px; border:2px solid transparent}
.imgList .ac { border:2px solid red}
.imgList li img{ width:40px; display:block}
.price { height:50px; font-size:30px; color:red; font-weight:bold}
.priceList { overflow:hidden; margin:20px 0}
.priceList li { float:left; height:30px; line-height:30px; padding:0 10px; border:2px solid #999; margin-right:10px; cursor:pointer}
.priceList .ac { border:2px solid red}
.changeNum { position:relative; margin:20px 0}
.changeNum input { width:40px; height:41px; text-align:center; line-height:40px;border:1px solid #ccc;}
.changeNum button {height:22px; width:20px; background:none; border:1px solid #ccc; position:absolute;}
.changeNum .addBtn { left:41px; top:0px;}
.changeNum .subBtn { left:41px; top:21px;}
.okBtn { height:30px; width:100px}
.bigBox { position: absolute; width: 200px; height: 200px; left: 230px; display: none; overflow: hidden; }
.bigBox img {position: absolute;width: 400px;height: 400px;}

.shopCart { position: fixed;right: 0;top: 200px;color: red;}  
.shopNum { width: 60px; height: 25px; background: deeppink; color:black; text-align: center; line-height: 25px;}
.active { width: 25px; height: 25px; background: skyblue; position: absolute;}
</style>
	</head>

	<body>
		<div class="shopping" id="shopping">
			<div class="left">
				<div class="girlImg" id="box">
					<img id="girl" src="4.jpeg">
					<span></span>
				</div>
				<ol id="imgList" class="imgList">
					<li><img src="0.jpg"></li>
					<li><img src="1.jpg"></li>
					<li><img src="2.jpg"></li>
					<li><img src="3.jpg"></li>
				</ol>
			</div>
			<div class="right">
				<h3>淘宝选女友---不要998,女友带回家!!</h3>
				<div id="price" class="price"><em>480-99988</em> 元</div>
				<ul id="priceList" class="priceList">
					<li>标准版</li>
					<li>升级版</li>
					<li>豪华版</li>
					<li>定制版</li>
				</ul>
				<div id="changeNum" class="changeNum">
					<input type="text" value="1">
					<button class="addBtn" type="button">+</button>
					<button class="subBtn" type="button" disabled>-</button>
				</div>
				<button id="okBtn" class="okBtn" type="button" disabled>加入购物车</button>
			</div>
			<div id="bigBox" class="bigBox"><img src="4.jpeg" alt=""></div>
		</div>
		<div id="shopCart" class="shopCart">
			购物车
			<p id="shopNum" class="shopNum">0</p>
		</div>

		<script>
			//获取整个div
			var shopping = document.querySelector("#shopping");

			//先做图片点击:你要先获取左边的box;再获取imgList的li按钮
			var left = shopping.querySelector(".left");
			var box = left.querySelector("#box"); //获取第一个目标
			var img1 = box.querySelector("img");
			var ol = left.querySelector("#imgList");
			var imgBtns = ol.querySelectorAll("li"); //获取第二个目标

			//现在做priceList的切换:获取右边的right,然获取priceList里的里按钮
			var right = shopping.querySelector(".right");
			var priceBtns = right.querySelectorAll("li");
			var price = right.querySelector("#price").querySelector("em");
			console.log(price);
			var a = [480, 1860, 2888, 99988];


			//现在做放大镜
			var span = box.querySelector("span");
			var bigBox = document.querySelector("#bigBox");
			var img = bigBox.querySelector("img");
			//现在开始写button事件
			var changeNum = right.querySelector("#changeNum");
			var addBtn = changeNum.querySelector(".addBtn");
			var subBtn = changeNum.querySelector(".subBtn");
			var inpt = changeNum.querySelector("input");

			//购物车
			var shopCart = document.querySelector("#shopCart");
			var p = shopCart.querySelector("p");
			var okBtn = right.querySelector("#okBtn");

			//记录顺序
			var index = 0;
			var lastIndex = 0;

			//封面放大镜
			big1();
			remove();
			//图片点击
			for (let i = 0; i < imgBtns.length; i++) {
				imgBtns[i].onclick = () => {
					change(i);
					big();
					remove();
					fa();
				}
			}

			//priceList点击
			for (let j = 0; j < priceBtns.length; j++) {
				priceBtns[j].onclick = () => {
					change(j);
					big();
					remove();
					fa();
				}
			}

			//button事件
			addBtn.onclick = () => {
				var num = 0;
				if (inpt.value < 4) {
					inpt.value++;
					subBtn.disabled = false;
				} else if (inpt.value == 4) {
					alert("女生的福利呢！！！");
				}
			}
			subBtn.onclick = () => {

				if (inpt.value > 1) {

					inpt.value--;
				}
				if (inpt.value == 1) {
					subBtn.disabled = true;
				}

			}
			//加入购物车
			okBtn.onclick = (e) => {


				var x1 = e.clientX,
					y1 = e.clientY,
					// 终点，购物车位置
					x2 = shopCart.offsetLeft,
					y2 = shopCart.offsetTop,
					// 顶点
					x3 = window.innerWidth - 200,
					y3 = 50;
				// 根据公式计算抛物线系数
				var a = -((y2 - y3) * x1 - (x2 - x3) * y1 + x2 * y3 - x3 * y2) / ((x2 - x3) * (x1 - x2) * (x1 - x3))
				var b = ((y2 - y3) * x1 * x1 + x2 * x2 * y3 - x3 * x3 * y2 - (x2 * x2 - x3 * x3) * y1) / ((x2 - x3) * (x1 - x2) *
					(x1 - x3));
				var c = ((x2 * y3 - x3 * y2) * x1 * x1 - (x2 * x2 * y3 - x3 * x3 * y2) * x1 + (x2 * x2 * x3 - x2 * x3 * x3) * y1) /
					((x2 - x3) * (x1 - x2) * (x1 - x3));

				// 抛物线起点是鼠标坐标
				var left = x1;
				// 创建一个抛物线的元素
				var div = document.createElement('div');
				div.className = 'active';
				div.style.left = x1 + 'px';
				div.style.top = y1 + 'px';
				document.body.appendChild(div);
				var timer = setInterval(() => {
					left += 5;
					var top = a * left * left + b * left + c;
					div.style.left = left + 'px';
					div.style.top = top + 'px';
					// 判断终点
					if (left >= x2) {
						clearInterval(timer);
						div.remove();
						// 购物车数量加一
						p.innerHTML = parseInt(inpt.value) + parseInt(p.innerHTML);
					}
				}, 20)
			}

			/****************封装函数*********************、
			/* ******第一个：图片转换****************** */
			function change(x) {
				lastIndex = index;
				index = x;
				img1.src = imgBtns[index].firstChild.src;

				imgBtns[index].className = "ac";
				imgBtns[lastIndex].className = " ";
				priceBtns[index].className = "ac";
				priceBtns[lastIndex].className = " ";
				price.innerHTML = a[index];
			}
			/* ******第二个：放大镜****************** */
			function big() {
				box.onmousemove = e => {

					e = e || window.event;
					span.style.display = "block";
					bigBox.style.display = "block";
					let top = e.clientY - shopping.offsetTop - box.offsetTop - span.offsetHeight / 2;
					let left = e.clientX - shopping.offsetLeft - box.offsetLeft - span.offsetWidth / 2;
					move(left, top);
					img.src = imgBtns[index].firstChild.src;
				}

			}
			//封面专用版
			function big1() {
				box.onmousemove = e => {

					e = e || window.event;
					span.style.display = "block";
					bigBox.style.display = "block";
					let top = e.clientY - shopping.offsetTop - box.offsetTop - span.offsetHeight / 2;
					let left = e.clientX - shopping.offsetLeft - box.offsetLeft - span.offsetWidth / 2;
					move(left, top);
					// img.src = imgBtns[index].firstChild.src;
				}

			}

			function remove() {
				//移除事件
				box.onmouseleave = e => {
					span.style.display = "none";
					bigBox.style.display = "none";
				}
			}

			/* ******第三个：范围限定****************** */
			function move(left, top) {
				if (left < 0) left = 0
				if (top < 0) top = 0
				if (left > box.offsetWidth - span.offsetWidth) left = box.offsetWidth - span.offsetWidth;
				if (top > box.offsetHeight - span.offsetHeight) top = box.offsetHeight - span.offsetHeight;
				span.style.left = left + 'px'
				span.style.top = top + 'px'

				//比例
				img.style.left = -2 * left + 'px'
				img.style.top = -2 * top + 'px'


			}
			/* ******第四个：购物车****************** */
			function fa() {
				okBtn.disabled = false;
			}
		</script>
	</body>
</html>
